<template>
  <div class="pageLogin">
    <!-- 登录 -->
    <div class="popup" v-if="loginType == 2 || loginType == 3">
      <div class="pop_left">
        <div class="pop_left_title">扫描二维码登录</div>
        <div class="pop_left_code qrcode" v-loading="weixinLoading">
          <img :src="qrcodeUrl" alt="" />
        </div>
        <div class="pop_left_tip">请使用微信扫一扫，扫码登录</div>
      </div>
      <div class="pop_right">
        <div class="close_icon" @click="goHome">
          <img src="../../assets/login/2.png" alt="" />
        </div>
        <div class="pop_ri_tabs">
          <div
            @click="selectLoginType(2)"
            class="ri_tabs_item"
            :class="loginType == 2 ? 'active_text' : ''"
          >
            <div>密码登录</div>
            <div v-if="loginType == 2" class="ri_tabs_item_line"></div>
          </div>
          <div
            @click="selectLoginType(3)"
            class="ri_tabs_item"
            :class="loginType == 3 ? 'active_text' : ''"
          >
            <div>验证码登录</div>
            <div v-if="loginType == 3" class="ri_tabs_item_line"></div>
          </div>
        </div>
        <div class="pop_input">
          <img class="pop_input_icon" src="../../assets/login/3.png" alt="" />
          <el-input
            v-model="mobile"
            :placeholder="loginType == 2 ? '手机号/账号' : '手机号'"
            oninput="if(value.length>11)value=value.slice(0,11)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            type="number"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="11"
          />
        </div>
        <div class="pop_input marginTop16" v-if="loginType == 2">
          <img class="pop_input_icon" src="../../assets/login/4.png" alt="" />
          <el-input
            v-model="password"
            placeholder="请输入密码(6~12位字母+数字)"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            type="password"
            show-password
          />
          <!-- <img class="psd_icon" src="../../assets/login/5.png" alt="" /> -->
          <!-- <img class="psd_icon" src="../../assets/login/6.png" alt=""> -->
        </div>
        <div class="pop_input marginTop16" v-if="loginType == 3">
          <img class="pop_input_icon" src="../../assets/login/7.png" alt="" />
          <el-input
            v-model="code"
            placeholder="验证码"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            type="number"
            oninput="if(value.length>4)value=value.slice(0,4)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            maxlength="4"
          />
          <span class="code_text" @click="getCode">{{ codeText }}</span>
        </div>
        <div class="login_text">
          <div>
            <span>没有账号？</span>
            <span class="login_text_le_1" @click="selectLoginType(1)"
              >立即注册</span
            >
          </div>
          <div>
            <span @click="selectLoginType(6)">忘记密码</span>
          </div>
        </div>
        <div class="login_btn" @click="getLogin">登录</div>
        <div class="agreement_info">
          <img
            @click="selectTalk"
            v-if="is_talk"
            src="../../assets/default/1.png"
            alt=""
          />
          <img
            @click="selectTalk"
            v-else
            src="../../assets/default/2.png"
            alt=""
          />
          <span>已阅读并同意</span>
          <span class="agreement_text" @click="seeAgreement(1)"
            >《用户注册协议》</span
          >
          <span>与</span>
          <span class="agreement_text" @click="seeAgreement(2)"
            >《隐私政策》</span
          >
        </div>
      </div>
    </div>

    <!-- 注册 -->
    <div class="popup_register" v-if="loginType == 1">
      <div class="pop_left_register">
        <div class="pop_left_title">扫描二维码登录</div>
        <div class="pop_left_code qrcode">
          <img :src="qrcodeUrl" alt="" />
        </div>
        <div class="pop_left_tip">请使用微信扫一扫，扫码登录</div>
      </div>
      <div class="pop_right_register">
        <div class="close_icon" @click="goHome">
          <img src="../../assets/login/2.png" alt="" />
        </div>
        <div class="register_title">注册</div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/3.png" alt="" />
          <el-input
            type="number"
            oninput="if(value.length>11)value=value.slice(0,11)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            v-model="mobile"
            placeholder="手机号"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="11"
          />
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/7.png" alt="" />
          <el-input
            v-model="code"
            placeholder="验证码"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            type="number"
            oninput="if(value.length>4)value=value.slice(0,4)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            maxlength="4"
          />
          <span class="code_text" @click="getCode">{{ codeText }}</span>
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/4.png" alt="" />
          <el-input
            v-model="password"
            placeholder="请输入密码(6~12位字母+数字)"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="12"
            type="password"
            show-password
          />
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/14.png" alt="" />
          <el-input
            v-model="real_name"
            placeholder="请输入真实姓名"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="14"
          />
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/8.png" alt="" />
          <el-input
            v-model="invite_code"
            placeholder="请输入邀请码(选填)"
            placeholder-style="color:#bfbfbf;font-size:9px;"
          />
        </div>
        <div class="login_btn_register" @click="registerConfirm">注册</div>
        <div class="login_text_register">
          <div>
            <span>已有账号？</span>
            <span class="login_text_le_1" @click="selectLoginType(2)"
              >立即登录</span
            >
          </div>
        </div>

        <div class="agreement_info">
          <img
            @click="selectTalk"
            v-if="is_talk"
            src="../../assets/default/1.png"
            alt=""
          />
          <img
            @click="selectTalk"
            v-else
            src="../../assets/default/2.png"
            alt=""
          />
          <span>已阅读并同意</span>
          <span class="agreement_text" @click="seeAgreement(1)"
            >《用户注册协议》</span
          >
          <span>与</span>
          <span class="agreement_text" @click="seeAgreement(2)"
            >《隐私政策》</span
          >
        </div>
      </div>
    </div>

    <!-- 绑定手机号 -->
    <div class="popup_bind_phone" v-if="loginType == 5">
      <div class="pop_bind_right">
        <div class="close_icon" @click="goHome">
          <img src="../../assets/login/2.png" alt="" />
        </div>
        <div class="bind_phone_title">
          <div class="bind_phone_title_1">绑定手机号</div>
          <div class="bind_phone_title_2">
            ·为了保证您的账号资金安全，请绑定您的手机号码。
            ·若您的账号已绑定手机号，需您原绑定手机号验证身份，提升账号安全。
          </div>
        </div>
        <div class="pop_input marginTop16">
          <img class="pop_input_icon" src="../../assets/login/3.png" alt="" />
          <el-input
            type="number"
            oninput="if(value.length>11)value=value.slice(0,11)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            v-model="mobile"
            placeholder="手机号"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="11"
          />
        </div>
        <div class="pop_input marginTop16">
          <img class="pop_input_icon" src="../../assets/login/7.png" alt="" />
          <el-input
            v-model="code"
            placeholder="验证码"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            type="number"
            oninput="if(value.length>4)value=value.slice(0,4)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          />
          <span class="code_text" @click="getCode">{{ codeText }}</span>
        </div>
        <div class="pop_input marginTop16">
          <img class="pop_input_icon" src="../../assets/login/4.png" alt="" />
          <el-input
            v-model="password"
            placeholder="请输入密码(6~12位字母+数字)"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="12"
            type="password"
            show-password
          />
          <!-- <img class="psd_icon" src="../../assets/login/5.png" alt="" /> -->
          <!-- <img class="psd_icon" src="../../assets/login/6.png" alt=""> -->
        </div>
        <div class="pop_input marginTop16">
          <img class="pop_input_icon" src="../../assets/login/14.png" alt="" />
          <el-input
            v-model="real_name"
            placeholder="请输入真实姓名"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="14"
          />
        </div>
        <div class="login_btn" @click="bindPhone">确定</div>
      </div>
    </div>

    <!-- 忘记密码 -->
    <div class="forgot_password" v-if="loginType == 6">
      <div class="pop_left_register">
        <div class="pop_left_title">扫描二维码登录</div>
        <div class="pop_left_code qrcode">
          <img :src="qrcodeUrl" alt="" />
        </div>
        <div class="pop_left_tip">请使用微信扫一扫，扫码登录</div>
      </div>
      <div class="pop_right_register">
        <div class="close_icon" @click="goHome">
          <img src="../../assets/login/2.png" alt="" />
        </div>
        <div class="register_title">重置密码</div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/3.png" alt="" />
          <el-input
            type="number"
            oninput="if(value.length>11)value=value.slice(0,11)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
            v-model="mobile"
            placeholder="手机号"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="11"
          />
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/7.png" alt="" />
          <el-input
            v-model="code"
            placeholder="验证码"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            type="number"
            oninput="if(value.length>4)value=value.slice(0,4)"
            onkeypress="return (/[\d]/.test(String.fromCharCode(event.keyCode)));"
          />
          <span class="code_text" @click="getCode">{{ codeText }}</span>
        </div>
        <div class="pop_input_register">
          <img class="pop_input_icon" src="../../assets/login/4.png" alt="" />
          <el-input
            v-model="password"
            placeholder="请输入密码(6~12位字母+数字)"
            placeholder-style="color:#bfbfbf;font-size:9px;"
            maxlength="12"
            type="password"
            show-password
          />
          <!-- <img class="psd_icon" src="../../assets/login/5.png" alt="" /> -->
          <!-- <img class="psd_icon" src="../../assets/login/6.png" alt=""> -->
        </div>

        <div class="login_btn_register" @click="forgotPsd">确定</div>
        <div class="login_text_register">
          <div>
            <span>没有账号？</span>
            <span class="login_text_le_1" @click="selectLoginType(1)"
              >立即注册</span
            >
          </div>
        </div>
      </div>
    </div>
  </div>


  <img @click="copyMacCode(mac)" class="mac_icon" src="../../assets/login/15.png" alt="">

  <viewAgreement ref="agreement" :score="agreementType"></viewAgreement>

  <webview
    v-if="is_webview"
    class="webviewText"
    id="webview"
    :src="wxloginurl"
  ></webview>
</template>

<script name="login" setup>
import { copyDomText } from "@/utils/common.js";  // 复制方法
import { ref, reactive, watch, inject, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import { validate } from "@/utils/validate";
import {
  post5b5bdc44796e8,
  post5cad9f63e4f94,
  post5c78dbfd977cf,
  post5c78dca45ebc1,
  post5caeeba9866aa,
  post6629ee32366ab,
  post662a2b3510704,
  post5d7757d28d076,
} from "@/utils/api.js";
import viewAgreement from "@/components/viewAgreement.vue";
import qs from "qs";
import QRCode from "qrcode";
import { useUserStore } from "@/stores/user";
const store = useUserStore();
const mac = store.mac;  // 电脑mac地址
// 路由
const router = useRouter();
const is_test = inject("$is_test"); // 是否是测试验证码
const injectMessage = inject("$message");
// 登录状态 1注册  2密码登录  3验证码登录  4微信登录  5绑定手机号  6忘记密码
let loginType = ref(2);
let agreementType = ref(1);

let weixinLoading = ref(true);
let wxloginurl = ref("");
let is_webview = ref(true);
// 回调地址
let webviewUrl = encodeURIComponent(`http://app.dgzj-edupt.cn/pc/#/login`);
// let webviewUrl = 'http://app.dgzj-edupt.cn/pc/#/login';
let appId = "wx1c16fffbb5422aa4";
let state = Math.random().toString().slice(2);
wxloginurl.value = `https://open.weixin.qq.com/connect/qrconnect?appid=${appId}&redirect_uri=${webviewUrl}&response_type=code&scope=snsapi_login&state=${state}#wechat_redirect`;

onMounted(() => {
  // weiXinLogin();
  weixinLoginElectron();
});
onUnmounted(() => {
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  if (loginTimer.value) {
    clearInterval(loginTimer.value);
    loginTimer.value = null;
  }
});
watch(loginType, (value) => {
  real_name.value = "";
  code.value = "";
  password.value = "";
  if (timer.value) {
    clearInterval(timer.value);
    timer.value = null;
  }
  codeTime.value = 60;
  codeText.value = "获取验证码";
  is_code.value = false;
  is_talk.value = false;
  // weixinLoading.value = true;
  // is_webview.value = false;
  // setTimeout(() => {
  //   is_webview.value = true;
  // }, 300)
  // setTimeout(() => {
  //   weixinLoginElectron();
  // }, 800)
 
  // weiXinLogin();
});
// 微信三方登录桌面端
let qrcodeUrl = ref("");
function weixinLoginElectron() {
  let webview = document.querySelector("webview");
  webview.addEventListener("dom-ready", (e) => {
    // console.log("webview加载完毕~~", e);
    webview
      .executeJavaScript(`document.querySelector('.qrcode').outerHTML`)
      .then((res) => {
        console.log(res);
        const uuid = res.match(/src="\/connect\/qrcode\/(\S*)">/)[1];
        const qrCodeUrl = `https://open.weixin.qq.com/connect/confirm?uuid=${uuid}&chInfo=ch_share__chsub_CopyLink`;
        console.log("qrcodeUrl", qrCodeUrl);
        QRCode.toDataURL(qrCodeUrl, (err, url) => {
          console.log(url);
          weixinLoading.value = false;
          if (err) return injectMessage.error("微信登录二维码生成失败，请重试");
          qrcodeUrl.value = url;
          // 这里的url就是要显示在真实页面上的二维码了
          // const img = document.querySelector("img");
          // if (img) {
          //   img.src = url;
          // }
        });
      });
  });
  // 微信扫码后的webView跳转监听
  webview.addEventListener("will-navigate", (e) => {
    // console.log("监听到用户扫码后的webView跳转，得到的登录code为", e);
    let wx_parseUrl = qs.parse(e.url.split("?")[1]);
    // console.log(wx_parseUrl);
    if (wx_parseUrl.code) {
      clearInterval(loginTimer.value);
      loginTimer.value = null;
      post662a2b3510704({
        code: wx_parseUrl.code,
      }).then((res) => {
        // console.log(res);
        if (res.code == 1) {
          if (res.data.is_bind == 1) {
            injectMessage.success(res.msg);
            store.setUserInfo(res.data.userinfo);
            store.setToken(res.data.userinfo.user_token);
            router.replace({
              path: "/",
            });
          } else {
            injectMessage.warning("请绑定手机号");
            openid.value = res.data.res.openid;
            unionid.value = res.data.res.unionid;
            loginType.value = 5;
          }
        }
      });
    }
  });
}


//微信三方登录
let loginTimer = ref(null);
function weiXinLogin() {
  if (loginTimer.value) {
    clearInterval(loginTimer.value);
    loginTimer.value = null;
  }
  getWXQRCode();
}

//获取微信的登录二维码
//编码样式 :
// .impowerBox .qrcode {width: 220px;height:220px;margin-top: 0;border:none;}
// .impowerBox .title {display: none;}
// .impowerBox .info {display:none;}
// .status_icon {display: none;}
// .impowerBox .status {text-align: center;color:#999;font-size: 14px;font-family: Microsoft YaHei-Regular, Microsoft YaHei;font-weight: 400;}
function getWXQRCode() {
  let redirectUri = encodeURIComponent(window.location.href); // https://yongkang.niurenjianzhan.com/pc/#/wxLoginHome
  // let redirectUri = encodeURIComponent('https://yongkang.niurenjianzhan.com/pc/#/wxLoginHome');
  // console.log(window.location.href,'重定向地址');
  var obj = new WxLogin({
    self_redirect: false, // 这个为true的时候是直接在扫码的区域展现页面，我不需要，所以直接写false
    id: "wixin_login_1", // 上面定义的id名称
    appid: "wx1c16fffbb5422aa4", // this.$store.state.appId, // 申请的网站应用appid  测试: wxbdc5610cc59c1631
    scope: "snsapi_login", // 网页授权，目前网页只有这一种方式，静默授权
    redirect_uri: redirectUri, // redirectUri, // 申请网站应用时填写的回调域名，这里对应即可  测试: encodeURI("https://passport.yhd.com")
    state: Math.random(), // 简单的随机数+Session用来校验，
    style: "black", // black、white两种可以选择，二维码样式（默认black）
    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIyMHB4O2hlaWdodDoyMjBweDttYXJnaW4tdG9wOiAwO2JvcmRlcjpub25lO30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge2Rpc3BsYXk6bm9uZTt9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZTt9Ci5pbXBvd2VyQm94IC5zdGF0dXMge3RleHQtYWxpZ246IGNlbnRlcjtjb2xvcjojOTk5O2ZvbnQtc2l6ZTogMTRweDtmb250LWZhbWlseTogTWljcm9zb2Z0IFlhSGVpLVJlZ3VsYXIsIE1pY3Jvc29mdCBZYUhlaTtmb250LXdlaWdodDogNDAwO30=", // 自定义样式链接，只能使用https链接或者base64编码的地址(修改二维码的样式，要经过base64位转码，地址为（https://the-x.cn/base64/）)
  });
  loginTimer.value = setInterval(() => {
    getWechatCallbackInfo();
  }, 1000);
}

// 获取微信回调信息并且绑定手机号
let openid = ref("");
let unionid = ref("");

function getWechatCallbackInfo() {
  try {
    let Wechat_return_code = window.location.href;
    //获取微信回调的code
    let wx_parseUrl = qs.parse(Wechat_return_code.split("?")[1]);
    //因为这里的需求绑定账号时需要发送验证码，所以暂存本地
    // let wx_code_url = localStorage.getItem('QRCODEWX');
    // let analysis_wx_code_url = JSON.parse(wx_code_url);
    //当有验证码并且微信回调了code的时候再去做绑定操作。
    // && wx_code_url != null
    // console.log(wx_parseUrl)
    if (wx_parseUrl.code) {
      clearInterval(loginTimer.value);
      loginTimer.value = null;
      post662a2b3510704({
        code: wx_parseUrl.code,
      }).then((res) => {
        // console.log(res);
        if (res.code == 1) {
          if (res.data.is_bind == 1) {
            injectMessage.success(res.msg);
            store.setUserInfo(res.data.userinfo);
            store.setToken(res.data.userinfo.user_token);
            router.replace({
              path: "/",
            });
          } else {
            injectMessage.error("请绑定手机号");
            openid.value = res.data.res.openid;
            unionid.value = res.data.res.unionid;
            loginType.value = 5;
          }
        }
      });
      // alert(JSON.stringify(wx_parseUrl))
      //查看用户是否存在
      // const res = await getOpenId({
      //   code: wx_parseUrl.code,
      // });
      // if (res.data.unionid) {
      //   //三方登录
      //   sessionStorage.setItem("openId", res.data.openid);
      //   sessionStorage.setItem('unionId',res.data.unionid);
      //   this.threePartLogin(res.data.unionid, wx_parseUrl.code);
      // }
      if (Wechat_return_code.indexOf("?") != -1) {
        // alert(Wechat_return_code)
        Wechat_return_code = Wechat_return_code.replace(/(\?|#)[^'"]*/, "");
        window.history.pushState({}, 0, Wechat_return_code); // 无跳转刷新url
      }
    }
  } catch (e) {
    // e.msg && this.$message.warning(e.msg);
    // this.dialogVisible1 = false;
  }
}
// 绑定手机号
function bindPhone() {
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  if (!code.value) {
    injectMessage.error("请输入验证码");
    return;
  }
  if (!password.value) {
    injectMessage.error("请输入密码");
    return;
  }
  if (!validate(password.value, "password")) {
    injectMessage.error("请输入正确的密码(6~12位字母+数字)");
    return;
  }
  if (!real_name.value) {
    injectMessage.error("请输入真实姓名");
    return;
  }
  post5d7757d28d076({
    third_type: "wx_app",
    account_type: "mobile",
    account: mobile.value,
    code: code.value,
    password: password.value,
    openid: openid.value,
    unionid: unionid.value,
    real_name: real_name.value,
    device_id: mac
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        injectMessage.success(res.msg);
        store.setUserInfo(res.data.userinfo);
        store.setToken(res.data.userinfo.user_token);
        router.replace({
          path: "/",
        });
      }
    })
    .catch((err) => {
      console.log(err);
    });
}

// 获取验证码
let codeText = ref("获取验证码");
let timer = ref(null);
let codeTime = ref(60);
let is_code = ref(false);
function getCode() {
  if (is_code.value) return;
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  if (loginType.value != 6 && loginType.value != 5) {
    if (!is_talk.value) {
      injectMessage.error("请阅读并同意《用户注册协议》与《隐私政策》");
      return;
    }
  }

  is_code.value = true;
  post5b5bdc44796e8({
    mobile: mobile.value,
    type: 7,
    is_test: is_test,
  })
    .then((res) => {
      // console.log(res);
      if (res.code == 1) {
        if (is_test == 1) {
          injectMessage.success(`验证码为：${res.data.code}`);
        } else {
          injectMessage.success("验证码发送成功");
        }
        timer.value = setInterval(() => {
          codeText.value = `${codeTime.value}s`;
          if (codeTime.value <= 1) {
            codeText.value = "获取验证码";
            clearInterval(timer.value);
            codeTime.value = 0;
            is_code.value = false;
          } else {
            codeTime.value--;
          }
        }, 1000);
      } else {
        is_code.value = false;
      }
    })
    .catch((err) => {
      is_code.value = false;
    });
}

// 协议弹窗
let agreement = ref(null);
function seeAgreement(type) {
  agreementType.value = type;
  agreement.value.openPopup();
}

let mobile = ref("");
let password = ref("");
let code = ref("");
let real_name = ref("");
let invite_code = ref("");

function selectLoginType(type) {
  loginType.value = type;
}
let is_talk = ref(false);
function selectTalk() {
  is_talk.value = !is_talk.value;
}

// 注册确定按钮
function registerConfirm() {
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  if (!code.value) {
    injectMessage.error("请输入验证码");
    return;
  }
  if (!password.value) {
    injectMessage.error("请输入密码");
    return;
  }
  if (!validate(password.value, "password")) {
    injectMessage.error("请输入正确的密码(6~12位字母+数字)");
    return;
  }
  if (!real_name.value) {
    injectMessage.error("请输入真实姓名");
    return;
  }
  if (!is_talk.value) {
    injectMessage.error("请阅读并同意《用户注册协议》与《隐私政策》");
    return;
  }
  post5cad9f63e4f94({
    mobile: mobile.value,
    code: code.value,
    type: 7,
    password: password.value,
    invite_code: invite_code.value,
    real_name: real_name.value,
    device_id: mac
  }).then((res) => {
    // console.log(res);
    if (res.code == 1) {
      injectMessage.success(res.msg);
      store.setUserInfo(res.data.userinfo);
      store.setToken(res.data.userinfo.user_token);
      router.replace({
        path: "/",
      });
    }
  });
}
//登录
function getLogin() {
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  if (loginType.value == 3) {
    if (!code.value) {
      injectMessage.error("请输入验证码");
      return;
    }
  }
  if (loginType.value == 2) {
    if (!password.value) {
      injectMessage.error("请输入密码");
      return;
    }
    if (!validate(password.value, "password")) {
      injectMessage.error("请输入正确的密码(6~12位字母+数字)");
      return;
    }
  }
  if (!is_talk.value) {
    injectMessage.error("请阅读并同意《用户注册协议》与《隐私政策》");
    return;
  }
  if (loginType.value == 2) {
    post5c78dbfd977cf({
      account: mobile.value,
      account_type: "mobile",
      password: password.value,
      device_id: mac
    }).then((res) => {
      // console.log(res);
      if (res.code == 1) {
        injectMessage.success(res.msg);
        store.setUserInfo(res.data.userinfo);
        store.setToken(res.data.userinfo.user_token);
        router.replace({
          path: "/",
        });
      }
    });
  } else if (loginType.value == 3) {
    post5c78dca45ebc1({
      mobile: mobile.value,
      code: code.value,
      type: 7,
      device_id: mac
    }).then((res) => {
      // console.log(res);
      if (res.code == 1) {
        injectMessage.success(res.msg);
        store.setUserInfo(res.data.userinfo);
        store.setToken(res.data.userinfo.user_token);
        router.replace({
          path: "/",
        });
      }
    });
  }
}
// 忘记密码
function forgotPsd() {
  if (!mobile.value) {
    injectMessage.error("请输入手机号");
    return;
  }
  if (!validate(mobile.value, "phone")) {
    injectMessage.error("请输入正确的手机号");
    return;
  }
  if (!code.value) {
    injectMessage.error("请输入验证码");
    return;
  }
  if (!password.value) {
    injectMessage.error("请输入密码");
    return;
  }
  if (!validate(password.value, "password")) {
    injectMessage.error("请输入正确的密码(6~12位字母+数字)");
    return;
  }

  post5caeeba9866aa({
    account: mobile.value,
    account_type: "mobile",
    password: password.value,
    code: code.value,
    type: 7,
  }).then((res) => {
    // console.log(res);
    if (res.code == 1) {
      injectMessage.success(res.msg);
      store.clearUserInfo();
      loginType.value = 2;
    }
  });
}
// 复制mac地址
function copyMacCode(mac) {
  copyDomText(mac);
}

function goHome() {
  router.replace({
    path: "/",
  });
}
</script>

<style lang="scss" scoped>
.webviewText {
  // width: 200px;
  height: 0;
}
.pageLogin {
  width: 100vw;
  height: 100vh;
  background: url(@/assets/login/1.png) no-repeat;
  background-size: 100% 100%;
  position: relative;
}
.popup {
  width: 540px;
  height: 310px;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  .pop_left {
    width: 240px;
    height: 100%;
    background: #f2f7ff;
    text-align: center;
    padding-top: 50px;
    .pop_left_title {
      font-size: 11px;
      font-weight: 500;
    }
    .pop_left_code {
      width: 147px;
      height: 147px;
      margin: 19px auto 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .pop_left_tip {
      color: #999;
      font-size: 9px;
    }
  }
  .pop_right {
    width: calc(100% - 240px);
    height: 100%;
    padding: 50px 37.5px 0;
    position: relative;
    .pop_ri_tabs {
      display: flex;
      align-items: center;
      margin-bottom: 22.5px;
      .ri_tabs_item {
        position: relative;
        font-size: 11px;
        color: #666;
        font-weight: 400;
        margin-right: 16px;
        cursor: pointer;
        .ri_tabs_item_line {
          width: 35px;
          height: 2px;
          background: #1f52ae;
          position: absolute;
          bottom: -4px;
          left: 50%;
          transform: translateX(-50%);
        }
      }
      .active_text {
        color: #333;
        font-weight: 500;
      }
    }
    .pop_input {
      width: 100%;
      height: 31px;
      padding: 0 10px;
      background: #f6f7f9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      font-size: 9px;
      .pop_input_icon {
        width: 11px;
        height: 11px;
      }
      .psd_icon {
        width: 11px;
        height: 11px;
        cursor: pointer;
      }
      .code_text {
        color: #1f52ae;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .marginTop16 {
      margin-top: 16px;
    }
    .login_text {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 9px;
      margin-top: 12px;
      color: #999999;
      .login_text_le_1 {
        color: #1f52ae;
      }
      span {
        cursor: pointer;
      }
    }
    .login_btn {
      margin-top: 30px;
      width: 100%;
      height: 34px;
      background: #1f52ae;
      border-radius: 3px;
      color: #ffffff;
      font-size: 11px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .agreement_info {
      position: absolute;
      left: 50%;
      bottom: 16.5px;
      transform: translateX(-50%);
      color: #999999;
      font-size: 8px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      img {
        width: 9px;
        height: 9px;
        margin-right: 4px;
        cursor: pointer;
      }
      .agreement_text {
        color: #1f52ae;
        cursor: pointer;
      }
    }
  }
}
.popup_register {
  width: 540px;
  height: 369px;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  .pop_left_register {
    width: 240px;
    height: 100%;
    background: #f2f7ff;
    text-align: center;
    padding-top: 74.5px;
    .pop_left_title {
      font-size: 11px;
      font-weight: 500;
    }
    .pop_left_code {
      width: 147px;
      height: 147px;
      margin: 19px auto 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .pop_left_tip {
      color: #999;
      font-size: 9px;
    }
  }
  .pop_right_register {
    width: calc(100% - 240px);
    height: 100%;
    padding: 31px 37.5px 0;
    position: relative;
    .register_title {
      font-size: 11px;
      font-weight: 500;
      margin-bottom: 18px;
      text-align: center;
    }
    .pop_input_register {
      width: 100%;
      height: 31px;
      padding: 0 10px;
      background: #f6f7f9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      font-size: 9px;
      margin-top: 12px;
      .pop_input_icon {
        width: 11px;
        height: 11px;
      }
      .psd_icon {
        width: 11px;
        height: 11px;
        cursor: pointer;
      }
      .code_text {
        color: #1f52ae;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .login_text_register {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      margin-top: 12px;
      color: #999999;
      .login_text_le_1 {
        color: #1f52ae;
      }
      span {
        cursor: pointer;
      }
    }
    .login_btn_register {
      margin-top: 12px;
      width: 100%;
      height: 34px;
      background: #1f52ae;
      border-radius: 3px;
      color: #ffffff;
      font-size: 11px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
    .agreement_info {
      position: absolute;
      left: 50%;
      bottom: 10px;
      transform: translateX(-50%);
      color: #999999;
      font-size: 8px;
      display: flex;
      align-items: center;
      white-space: nowrap;
      img {
        width: 9px;
        height: 9px;
        margin-right: 4px;
        cursor: pointer;
      }
      .agreement_text {
        color: #1f52ae;
        cursor: pointer;
      }
    }
  }
}
.popup_bind_phone {
  width: 350px;
  height: 345px;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;

  .pop_bind_right {
    width: 100%;
    height: 100%;
    padding: 31px 62.5px 0;
    position: relative;
    .bind_phone_title {
      .bind_phone_title_1 {
        font-size: 11px;
        font-weight: 500;
      }
      .bind_phone_title_2 {
        font-size: 8px;
        color: #999999;
        margin-top: 15px;
      }
    }
    .pop_input {
      width: 100%;
      height: 31px;
      padding: 0 10px;
      background: #f6f7f9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      font-size: 9px;
      .pop_input_icon {
        width: 11px;
        height: 11px;
      }
      .psd_icon {
        width: 11px;
        height: 11px;
        cursor: pointer;
      }
      .code_text {
        color: #1f52ae;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .marginTop16 {
      margin-top: 16px;
    }

    .login_btn {
      margin-top: 15px;
      width: 100%;
      height: 34px;
      background: #1f52ae;
      border-radius: 3px;
      color: #ffffff;
      font-size: 11px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
.forgot_password {
  width: 540px;
  height: 306px;
  border-radius: 5px;
  background: #fff;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  overflow: hidden;
  display: flex;
  .pop_left_register {
    width: 240px;
    height: 100%;
    background: #f2f7ff;
    text-align: center;
    padding-top: 50px;
    .pop_left_title {
      font-size: 11px;
      font-weight: 500;
    }
    .pop_left_code {
      width: 147px;
      height: 147px;
      margin: 19px auto 14px;
      img {
        width: 100%;
        height: 100%;
      }
    }
    .pop_left_tip {
      color: #999;
      font-size: 9px;
    }
  }
  .pop_right_register {
    width: calc(100% - 240px);
    height: 100%;
    padding: 31px 37.5px 0;
    position: relative;
    .register_title {
      font-size: 11px;
      font-weight: 500;
      margin-bottom: 18px;
      text-align: center;
    }
    .pop_input_register {
      width: 100%;
      height: 31px;
      padding: 0 10px;
      background: #f6f7f9;
      border-radius: 3px;
      display: flex;
      align-items: center;
      font-size: 9px;
      margin-top: 12px;
      .pop_input_icon {
        width: 11px;
        height: 11px;
      }
      .psd_icon {
        width: 11px;
        height: 11px;
        cursor: pointer;
      }
      .code_text {
        color: #1f52ae;
        white-space: nowrap;
        cursor: pointer;
      }
    }
    .login_text_register {
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 9px;
      margin-top: 12px;
      color: #999999;
      .login_text_le_1 {
        color: #1f52ae;
      }
      span {
        cursor: pointer;
      }
    }
    .login_btn_register {
      margin-top: 25px;
      width: 100%;
      height: 34px;
      background: #1f52ae;
      border-radius: 3px;
      color: #ffffff;
      font-size: 11px;
      border-radius: 3px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
    }
  }
}
.close_icon {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 20px;
  top: 16px;
  cursor: pointer;
  img {
    width: 100%;
    height: 100%;
  }
}


.mac_icon {
  width: 14px;
  height: 14px;
  position: fixed;
  left: 20px;
  bottom: 16px;
  z-index: 10;
  cursor: pointer;
}
</style>

